---
title: ✔️
image: /images/user-guide/tasks/tasks_header.png
---

<Frame>
  <img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
</Frame>

表示成功或完成的動作。

<Tabs>
<Tab title="Usage">

```jsx
import { Checkmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return <Checkmark />;
};
```

</Tab>

<Tab title="Props">

擴展 `React.ComponentPropsWithoutRef<'div'>` ，並接受一般 `div` 元素的所有屬性。

</Tab>

</Tabs>

## 動畫打勾標誌

表示具有動畫功能的打勾圖標。

<Tabs>

<Tab title="Usage">

```jsx
import { AnimatedCheckmark } from 'twenty-ui/display';

export const MyComponent = () => {
  return (
    <AnimatedCheckmark
      isAnimating={true}
      color="green"
      duration={0.5}
      size={30}
    />
  );
};
```

</Tab>

<Tab title="Props">

| 屬性   | 類型  | 描述           | 預設值                   |
| ---- | --- | ------------ | --------------------- |
| 動畫中  | 布爾值 | 控制打勾標誌是否在動畫中 | 假                     |
| 顏色   | 字串  | 打勾標誌的顏色      |                       |
| 持續時間 | 數字  | 動畫的持續時間（秒）   | 0.5 秒 |
| 大小   | 數字  | 打勾標誌的大小      | 28 像素                 |

</Tab>

</Tabs>
